<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mock.js模拟数据</title>
</head>
<body>
  
  <button type="button" id="app">点击请求</button>

  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
  <script>
    $("#app").click(function(){
      $.ajax({
        url:'http://api.hyyl.com/getlist',
        type: 'get',
        dataType: 'json'
      }).done(function(data, status, xhr){
        console.log(data, null, 2)
      })
    })

    var obj = {aa: '11', bb: '22', cc: '33', dd: '44'}
    Mock.mock('http://api.hyyl.com/getlist', {
      "user|1-3": [
        {
          "id|+1": 1,
          name: "@cname",
          "age|18-28": 0,
          birthday: '@date("yyyy-MM-dd")',
          city: '@city',
          "fromObj|2": obj
        }
      ]
    })

  </script>
  <script>
    

    var data = Mock.mock({
      "list|1-10": [
        {
          "id|+1": 1,
          "name": "@name"
        }
      ] 
    })
    console.log(JSON.stringify(data, null, 2))


    var random = Mock.Random
    var data2 = {
      email: random.email(),
      name: random.name(),
      image:random.image('200x100', "#00405d", "#fff", "mock.js"),
      url:random.url(),
      address: random.city()
    }
    console.log(JSON.stringify(data2, null, 2))
    /**
      前端定义接口 => 完成静态页面 => 完成UI交互 => 对接真实接口 => 页面逻辑测试

    */

  </script>
</body>
</html>